<template>
  <div
    class="container"
    :style="{ 'min-height': window_height + 'px' }"
  >
    <div
      class="content-html"
    >
      <editContentHtml
        ref="setContentHtml"
        :content="content_html"
        @store-content="contentHtmlListener"
      />
    </div>
    <!--占位-->
    <div style="width: 100% ; height: 120rpx ; " />
    <div
      style="width: 100% ; padding: 30rpx 0rpx ;position: fixed ; bottom: 0rpx ; left: 0;display: flex;justify-content: center;align-items: center"
    >
      <div
        class="submit-btn"
        :style="[{background: '#000000'}]"
        @click="clickSaveContentHtml"
      >
        <div>完成</div>
      </div>
    </div>
  </div>
</template>

<script>
import editContentHtml from "@/components/EditContentHtml.vue";
export default {
	name: "EditContentHtml",
	components: {
		editContentHtml
	},
	data(){
		return{
			window_height: 0, // 屏幕高度
			content_html:null , // 创建富文本变量
		} ;
	},
	methods:{
		// 点击保存富文本
		clickSaveContentHtml(){
			uni.setStorageSync("html",this.content_html);
			uni.navigateBack();
		},
		// 监听富文本改变值
		contentHtmlListener(e) {
			// 获取富文本信息
			this.content_html = e.html ;
		},
		contentHtmlStyle(content_html) {
			return content_html.replace(/<img[^>]*>/gi, function (match, capture) {
				return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, "style=\"max-width:100% ; height: auto; display:inline-block ;\""); // 替换style
			});
		},
	},
	onLoad() {
		// uniapp提供获取系统相关信息
		const res = uni.getSystemInfoSync();
		this.window_height = res.window_height;
	},
};
</script>

<style scoped lang="scss">
    .container{
        width: 100% ; background: #F7F8FA ;
        .content-html{
            width: 100% ; min-height: 100% ; padding: 20rpx ;
        }
    }
    /*提交按钮*/
    .submit-btn{
        width: 650rpx ; height: 88rpx ; border-radius: 44rpx ; color: #ffffff ; font-size: 30rpx ; font-weight: 600rpx ;
      text-align: center;
      line-height: 88rpx;
    }
</style>
